<template>
  <div>
    <el-dialog title="选择题目" :visible="true" width="880px" top="10px" :close-on-click-modal="false" :before-close="close">
      <el-form ref="searchTopic" :inline="true" :model="search" size="mini">
        <!-- <el-form-item label="所属题库"><el-select v-model="search.bank" placeholder="请选择"></el-select></el-form-item> -->
        <el-form-item label="知识点"><edu-cascader :value.sync="cascader.point" :options="options.point" :args="{}" /></el-form-item>
        <el-form-item label="题目类型"><edu-select :value.sync="search.question_type" :options="options.questionType" :args="{}" /></el-form-item>
        <el-form-item label="难易度"><edu-select :value.sync="search.difficulty" :options="options.difficulty" :args="{}" /></el-form-item>
        <el-form-item label="题目名称"><el-input v-model="search.title" placeholder="请输入题目名称关键字" /></el-form-item>
        <el-form-item><el-button @click="loadTopic">搜索</el-button></el-form-item>
      </el-form>
      <div>
        <el-table ref="topicTable" v-loading.lock="loading" :data="datas" style="width: 100%" height="400" row-key="id" @selection-change="handleSelectChange">
          <el-table-column type="selection" min-width="50" :selectable="checkSelectable" />
          <el-table-column label="题干">
            <template slot-scope="scope">
              <topic-title :row="scope.row" />
            </template>
          </el-table-column>
          <el-table-column prop="question_type_text" label="题型" width="180" />
          <el-table-column prop="difficulty_title" label="难易度" />
          <el-table-column prop="point_str" label="知识点" />
        </el-table>
        <el-pagination
          :current-page.sync="paginate.page"
          :page-size="paginate.count"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
      <div slot="footer" class="choose-footer">
        <el-button type="primary" size="small" :disabled="disabled" @click="choose">确认</el-button>
        <el-button size="small" @click="close">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EduSelect from '@public/form/select.vue';
import EduCascader from '@public/form/cascader.vue';
import TopicTitle from '@/pages/exam/question/topic/components/title.vue';
import { Loading } from 'element-ui';
export default {
  components: {
    EduSelect,
    EduCascader,
    TopicTitle
  },
  inject: ['reload'],
  data() {
    return {
      search: {
        point: '',
        question_type: '',
        difficulty: '',
        title: ''
      },
      cascader: {},
      topics: [],
      options: {
        point: [],
        questionType: [],
        difficulty: []
      },
      paginate: {
        count: 10,
        page: 1
      },
      response: null,
      loading: true,
      disabled: false
    };
  },
  computed: {
    datas() {
      if (this.response) {
        return this.response.data.datas;
      }
      return [];
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total;
      }
      return 0;
    }
  },
  watch: {
    cascader: {
      handler(datas) {
        Object.keys(datas).forEach(key => {
          const value = datas[key];
          const [val] = [...value].reverse();
          this.$set(this.search, key, val);
        });
      },
      deep: true
    }
  },
  created() {
    this.loadOptions();
    this.loadTopic();
  },
  methods: {
    close() {
      this.$emit('close');
    },
    choose() {
      var ids = this.topics.map(topic => topic.id);
      // 是否有选择
      if (ids.length !== 0) {
        // 提交到后台保存
        this.disabled = true;
        const loadingInstance = Loading.service({ text: '保存中...' });
        this.$http.post(
          '/exam/admin/module/' + this.$route.params.id + '/special/' + this.$route.params.special_id + '/create',
          {
            topics: ids
          },
          response => {
            loadingInstance.close();
            this.$message.success(response.msg, _ => {
              this.reload();
            });
          },
          error => {
            this.$message.error(error.msg);
          },
          false
        );
      } else {
        this.$emit('close');
      }
    },

    loadOptions() {
      this.$http.get(
        '/exam/admin/module/' + this.$route.params.id + '/special/' + this.$route.params.special_id + '/choose/options',
        {},
        response => {
          const {
            data: { options }
          } = response;
          this.options = options;
        },
        _ => {},
        false
      );
    },
    loadTopic() {
      this.loading = true;
      this.$http.get(
        '/exam/admin/module/' + this.$route.params.id + '/special/' + this.$route.params.special_id + '/choose/list',
        {
          ...this.search,
          ...this.paginate
        },
        response => {
          this.response = response;
          this.loading = false;
        },
        _ => {
          this.loading = false;
        },
        false
      );
    },
    checkSelectable(row) {
      return !row.checked;
    },
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadTopic();
    },
    // 单行选中与取消事件
    handleSelectChange: function(selection) {
      this.topics = selection;
    }
  }
};
</script>

<style></style>
